<template>
  <div>
    <el-form :model="questionnaire">
      <el-card style="width: 70%;margin-left: 15%;text-align: center">
        <span style="font-size: 300%;"> {{questionnaire.title}}</span>
        <el-form-item prop="content" label="问卷描述" style="margin-top: 40px">
          <el-input v-model="questionnaire.content" style="width: 70%;margin-right: 20%;"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <el-form :model="allQuestion" style="text-align: left">

          <el-form-item v-for="(question,index1) in allQuestion"
                        :key="index1">
            <span v-if="allQuestion.length !== 0">
              {{index1+1}}.{{question.title}}
              <el-button style="margin-left: 7%" @click="modify(question)">修改</el-button>
              <el-button style="margin-left: 7%" @click="removeQuestion(question)">删除</el-button>
            </span>

            <div class="show_radio" v-if="question.type === '单选'">
              <el-radio-group v-model="question.answer">
                <el-radio v-for="(option, index2) in question.option" :label="option.value">
                  {{option.value}}
                </el-radio>
              </el-radio-group>
            </div>

            <div class="show_multiSelect" v-if="question.type === '多选'">
              <el-checkbox-group v-model="question.answer">
                <el-checkbox v-for="(option, index2) in question.option" :label="option.value">
                  {{option.value}}
                </el-checkbox>
              </el-checkbox-group>
            </div>

            <div class="show_shortAnswer" v-if="question.type === '简答'">
              <el-input v-model="question.answer"></el-input>
            </div>
          </el-form-item>
        </el-form>

        <el-button @click="dialogVisible = true;exist=false" icon="el-icon-plus">添加题目</el-button>
        <el-button icon="el-icon-check" @click="createQuestionClick">完成</el-button>
      </el-card>

      <el-dialog title="添加题目" :visible.sync="dialogVisible" text-align="right">

        <el-form :model="newQuestion">
          <el-form-item label="题目描述">
            <el-input placeholder="请输入题目描述" v-model="newQuestion.content" class="input-with-select"></el-input>
          </el-form-item>

          <el-form-item label="题目类型">
            <el-select v-model="newQuestion.type" placeholder="请选择" @change="currentSelect">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>

          <div class="radio" v-show="radioVisible">
            <div style="text-align: left">
              <el-radio-group>
                <el-form-item :inline="true" v-for="(option, index) in newQuestion.options"
                              :label="'选项' + (index+1)"
                              :prop="'options.' + index + '.value'"
                              style="margin-bottom: 5px">
                  <el-radio>
                    <el-input placeholder="请输入选项描述" v-model="option.value" style="width: 625px">
                    </el-input><el-button @click.prevent="removeOption(option)" style="margin-left: 15px">删除</el-button>
                  </el-radio>
                </el-form-item>
              </el-radio-group>
            </div>
            <el-button @click="addOption" icon="el-icon-plus">添加选项</el-button>
          </div>

          <div class="multiSelect" v-show="multiVisible">
            <div style="text-align: left">
              <el-checkbox-group v-model="multiSelect">
                <el-form-item :inline="true" v-for="(option, index) in newQuestion.options"
                              :label="'选项' + (index+1)"
                              :prop="'options.' + index + '.value'"
                              style="margin-bottom: 5px">
                  <el-checkbox disabled>
                    <el-input placeholder="请输入选项描述" v-model="option.value" style="width: 625px">
                    </el-input><el-button @click.prevent="removeOption(option)" style="margin-left: 15px">删除</el-button>
                  </el-checkbox>
                </el-form-item>
              </el-checkbox-group>
            </div>
            <el-button @click="addOption" icon="el-icon-plus">添加选项</el-button>
          </div>
        </el-form>
        <el-button style="margin-top: 5px" @click="finishCreate(newQuestion)">确定</el-button>
      </el-dialog>
    </el-form>
  </div>
</template>

<script>
export default {
  data(){
    return{
      allQuestion:[],
      newQuestion:{
        id:'',
        content:'',
        type:'',
        options:[{id:'1',value:'',checked:'false'}]
      },
      radioVisible:false,
      multiVisible:false,
      shortVisible:false,
      multiSelect:[],
      questionnaire:{
        id:'',
        userId:'',
        question:'',
        content:'',
        title:'',
        questionNumber:'',
        state:'',
        answerNumber:'',
      },
      exist:false,
      radio:'',
      dialogVisible:false,
      options:[{
        value: '选项1',
        label: '单选'
      },
        {
        value: '选项2',
        label: '多选'
      },
        {
          value: '选项3',
          label: '简答'
        }],
    }
  },
  methods:{
    removeQuestion(item) {
      var index = this.allQuestion.indexOf(item)
      if (index !== -1) {
        this.allQuestion.splice(index, 1)
      }
    },
    removeOption(item) {
      var index = this.questionOptions.indexOf(item)
      if (index !== -1) {
        this.questionOptions.splice(index, 1)
      }
    },
    addOption() {
      this.newQuestion.options.push({
        id:this.newQuestion.options.length+1,
        value: '',
        checked: 'false',
      });
    },
    currentSelect(selected) {
      if(selected === "单选"){
        this.radioVisible=true;
        this.multiVisible=false;
        this.shortVisible=false;
        this.questionOptions=[
          {content:''}];
      }else if(selected === "多选"){
        this.radioVisible=false;
        this.multiVisible=true;
        this.shortVisible=false;
        this.questionOptions=[
          {content:''}];
      }else if(selected === "简答"){
        this.radioVisible=false;
        this.multiVisible=false;
        this.shortVisible=true;
      }
    },
    finishCreate(newQuestion){
      //将新问题保存在问卷中
      var length=this.allQuestion.length;
      var newId=length+1;

      if(! this.exist){
        this.allQuestion.push({
          id:newId,
          title:newQuestion.content,
          option:newQuestion.options,
          type:newQuestion.type,
          answer:[],
        });
      }else{
        for(let i=0;i<length;i++){
          if(this.allQuestion[i].id === this.newQuestion.id){
            this.allQuestion[i].title=newQuestion.content;
            this.allQuestion[i].option=newQuestion.options;
            this.allQuestion[i].type=newQuestion.type;
          }
        }
      }
      //清空newQuestion的值
      this.newQuestion.id='';
      this.newQuestion.content='';
      this.newQuestion.type='';
      this.newQuestion.options=[{id:'1',value:'',checked:'false'}];
      //关闭对话框
      this.dialogVisible=false;
      this.radioVisible=false;
      this.multiVisible=false;
      this.shortVisible=false;
    },
    modify(question){
      this.exist=true;
      this.dialogVisible=true;
      this.newQuestion.id=question.id;
      this.newQuestion.content=question.title;
      this.newQuestion.type=question.type;
      this.newQuestion.options=question.option;
      if(question.type === "单选"){
        this.radioVisible=true;
        this.multiVisible=false;
        this.shortVisible=false;
        this.questionOptions=[
          {content:''}];
      }else if(question.type === "多选"){
        this.radioVisible=false;
        this.multiVisible=true;
        this.shortVisible=false;
        this.questionOptions=[
          {content:''}];
      }else if(question.type === "简答"){
        this.radioVisible=false;
        this.multiVisible=false;
        this.shortVisible=true;
      }
    },

    createQuestionClick() {
      //如果有传递过来的问卷参数说明是修改问卷
      if(this.$route.query.id){
        this.$http({
          url:'http://47.104.100.60:83/updateQuestionnaire',
          method:'post',
          data:{
            id:this.$route.query.id,
            userId:sessionStorage.getItem('userId'),
            question:JSON.stringify({question:this.allQuestion}),
            content:this.questionnaire.content,
            title:this.questionnaire.title,
            questionNumber:this.allQuestion.length,
            state:'未发布',
            answerNumber:0
          }
        }).then(res =>{
          alert('编辑成功')
          this.$router.push({
            path:'/questionnaireList',
            query:{
              userId:sessionStorage.getItem('userId')
            }
          })
        }).catch(err =>{
          alert('编辑失败')
          console.log(err)
        })
      }else {
        this.$http({
          url:'http://47.104.100.60:83/insertQuestionnaire',
          method:'post',
          data: {
            userId:sessionStorage.getItem('userId'),
            question:JSON.stringify({question:this.allQuestion}),
            content:this.questionnaire.content,
            title:this.$route.query.title,
            questionNumber:this.allQuestion.length,
            state:'未发布',
            answerNumber:0
          }
        }).then(res =>{
          alert('创建成功')
          this.$router.push({
            path:'/questionnaireList',
            query:{
              userId:sessionStorage.getItem('userId')
            }

          })
        }).catch(err =>{
          alert('创建失败')
          console.log(err)
        })
      }
    },
  },
  mounted(){
    //问卷初始化，将问卷的问题内容保存到allquestion中
    //  判断
      if(this.$route.query.id){
        this.$http({
          url:"http://47.104.100.60:83/findById",
          method:"post",
          data:{
            id:this.$route.query.id
          }
        }).then(res =>{
          // console.log(res.data)
          // console.log(res.data.question)
          this.allQuestion = JSON.parse(res.data.question).question
          this.questionnaire.content = res.data.content
          this.questionnaire.title = res.data.title
        }).catch(err=>{
          console.log(err)
        })

      }else{
        this.allQuestion = []
        this.questionnaire.title = this.$route.query.title
      }

  }
}
</script>

<style scoped>

</style>